<template>
    <div class="box-tree">
        <vue-tree :data="treeData">
            <template #root="{ row, expand, handleExpand }">
                <div class="root-content light-blue">
                    <div class="expand-wrapper" @click="handleLoad(expand, handleExpand, row)">
                        <div class="expand-status">
                            <div class="tips">
                                <img class="close" :src="images[!expand ? 0 : 4]" />
                                <img class="icon" :src="images[5]" />
                            </div>
                        </div>
                        <div class="detail-content">
                            <span class="title">{{ row.label }}</span>
                        </div>
                    </div>
                </div>
            </template>
            <template #branch="{ row, expand, handleExpand }">
                <div class="branch-content node-content" @click="handleLoad(expand, handleExpand, row)">
                    <div class="expand-status">
                        <div class="tips">
                            <img class="close" :src="images[!expand ? 3 : 4]" />
                        </div>
                    </div>
                    <div class="detail-content">
                        <span class="title">{{ row.label }}(共{{ row.qstCount }}题)</span>
                    </div>
                </div>
            </template>
            <template #leaf="{ row }">
                <div class="leaf-content node-content">
                    <div class="text">
                        <div class="title">{{ row.label }}</div>
                        <div class="sub-title">{{ row.label }}</div>
                    </div>
                    <div class="handle" v-if="!row.children || !row.children.length">
                        <button class="button" @click="scanAndCorrect(row)">xxxx</button>
                        <button class="button" :class="{ disabled: !row.studyTaskId }"
                            @click="viewReport(row)">xx</button>
                    </div>
                </div>
            </template>
        </vue-tree>
    </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const isLoading = ref(true)
const treeData = ref([{
    id: 1,
    label: '111',
    children: []
}])

/**
 * 点击某节点，获取其子节点
 * @param nodeProps
 */
const loadNode = async (nodeProps: any) => {
    const { nodeState, node } = nodeProps;

    if (!node.id || node.children.length !== 0) {
        return;
    }

    nodeState.isLoading = true;

    const apiRes = {
        data: [
            {
                label: '3333'
            },
            {
                label: '3333'
            },
            {
                label: '3333'
            },
            {
                label: '3333'
            }]
    };

    const childes = apiRes.data.map((item) => ({
        id: item.nodeId,
        // @ts-ignore
        label: item.label || item.pageName,
        children: [],
        ...item,
    }));

    if (childes.length === 0) {
        node.children = [{ id: "", label: "暂无数据", children: [] }];
    } else {
        node.children = childes;
    }

    nodeState.isLoading = false;
};
const handleLoad = async (expand, fn, node) => {
    if (!expand) {
        await loadNode({ node, nodeState: { isLoading: false } });
    }
    fn();
};

const images = [
    "",
    "",
    "",
    "",
    "",
    "",
];
</script>

<style lang="scss" scoped>
.box-tree {
    width: auto;
    overflow-x: auto;

    :deep(.vue-tree) {
        width: 750px;
    }
}
</style>